<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>标签条件管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>

            <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">标签条件查询</h3>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入条件名称" clearable v-model="conditionName" @clear="searchCondition">
                        <el-button slot="append" icon="el-icon-search" @click="searchCondition"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary"  @click="readyAdd">添加标签条件</el-button>
                </el-col>
            </el-row>
        </el-card>
      <el-card style="margin-top: 30px">
            <el-table :data="conditionList" border stripe>
                <el-table-column type="index"></el-table-column>
              <el-table-column label="条件名称" prop="conditionname"></el-table-column>
              <el-table-column label="条件限制" prop="type"></el-table-column>
                <el-table-column label="操作" width="250px">
                    <template slot-scope="scope">
                        <el-button type="text"  @click="showEditDialog(scope.row)">编辑</el-button>
                        <el-button type="text"  @click="removeById(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[5, 10 , 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </el-card>

<!--   添加会员等级   -->
      <el-dialog title="添加标签等级" :visible.sync="addFormVisible" width="50%" :close-on-click-modal="false" @close="addFormClose">
        <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="条件名称" prop="level">
            <el-input v-model="addForm.conditionname"></el-input>
          </el-form-item>
          <el-form-item label="条件限制" prop="type">
            <el-input v-model="addForm.type"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="doAdd">确 定</el-button>
                <el-button @click="addFormClose">取 消</el-button>
            </span>
      </el-dialog>

      <!--   修改会员等级   -->
      <el-dialog title="修改标签条件" :visible.sync="editFormVisible" width="50%" :close-on-click-modal="false" @close="editFormClose">
        <el-form :model="editForm" :rules="editRules" ref="editForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="条件名称" prop="level">
            <el-input v-model="editForm.conditionname"></el-input>
          </el-form-item>
          <el-form-item label="条件限制" prop="type">
            <el-input v-model="editForm.type"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="doEdit">确 定</el-button>
                <el-button @click="editFormClose">取 消</el-button>
            </span>
      </el-dialog>

    </div>
</template>
<script>
    export default {
        data() {
            return {
                pageNum: 1,
                pageSize: 5,
                conditionList: [],
                total: 9,
                conditionName: "",
                addFormVisible: false,
                editFormVisible:false,
                addForm: {
                  conditionname:"",
                  type:""
                },
                editForm: {
                  id:"",
                  conditionname:"",
                  type:""

              },
              addRules: {
                   /*  userCode: [
                       { required: true, message: "請輸入工号", trigger: "blur" },
                       { min: 4, max: 4, message: "工号必须是4个字符", trigger: "blur" }
                     ]*/
                },
              editRules:{

              }
            };
        },
        methods: {
          doEdit(){

            this.$refs.editForm.validate(valid=>{
              if (!valid){
                return ;
              }
              let url = "condition/updateCondition";
              this.$axios.put(url,this.editForm).then(res=>{
                if (res.data.code == 200){
                  this.$message({
                    type:"success",
                    message:res.data.msg,
                    duration:1000
                  })
                  this.editFormVisible = false ;
                  this.$refs.editForm.resetFields();
                  this.searchCondition();
                }else {
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              });
            })

          },
          editFormClose(){
            this.editFormVisible=false
            this.$refs.editForm.resetFields();
          },
          showEditDialog(row) {
            this.editFormVisible=true;
            this.editForm=row;
          },
            removeById(id) {
              this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                    let url = "condition/del/"+id ;
                    this.$axios.delete(url)
                        .then(res=>{
                          if (res.data.code == 200){
                            this.$message({
                              type:"success",
                              message:res.data.msg,
                              duration:1000
                            })
                            this.searchCondition();
                          }else {
                            this.$message({
                              type:"error",
                              message:res.data.msg,
                              duration:1000
                            })
                          }
                        })
                  }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                });
              });

            },
          readyAdd(){
            this.addFormVisible=true;
          },
          doAdd() {
              this.$refs.addForm.validate(valid=>{
                if (!valid){
                  return ;
                }
                console.log(this.addForm)

                let url = "condition/add";
                this.$axios.post(url,this.addForm).then(res=>{
                  if (res.data.code == 200){
                    this.$message({
                      type:"success",
                      message:res.data.msg,
                      duration:1000
                    })
                    this.addFormVisible = false ;
                    this.$refs.addForm.resetFields();
                    this.searchCondition();
                  }else {
                    this.$message({
                      type:"error",
                      message:res.data.msg,
                      duration:1000
                    })
                  }
                });


              })
            },
          addFormClose() {
                this.$refs.addForm.resetFields();
                this.addFormVisible=false;
            },
          getConditionList() {
              let url = "condition/queryAllConditionByPage";
              this.$axios.get(url,{
                params:{
                  name:this.conditionName,
                  now:this.pageNum,
                  size:this.pageSize
                }
              }).then(res=>{
                if (res.data.code == 200){
                  this.conditionList = res.data.data.list;
                  this.pageNum = res.data.data.pageNum;
                  this.pageSize = res.data.data.pageSize;
                  this.total = res.data.data.total;
                }else {
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              });
            },
          searchCondition() {
                this.pageNum = 1;
                this.getConditionList();
            },
            handleSizeChange(newSize) {
                this.pageSize = newSize;
                this.getConditionList();
            },
            handleCurrentChange(newPage) {
                this.pageNum = newPage;
                this.getConditionList();
            },
            reloadData() {
                this.searchCondition();
                this.getConditionList();

            }
        },
        created() {
            this.reloadData();

        }
    };
</script>
<style lang="less" scoped>
</style>